<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Todo</title>
</head>

<body>
    <div id="app">
    	<input type="text" v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" name="">
    	<ul>
    		<todo v-for="(todo, index) in todos"  v-bind:title="todo" v-on:remove="todos.splice(index, 1)"></todo>
    	</ul>
    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    Vue.component('todo',{
    	props:['title'],
    	template:'<li>{{title}}<button v-on:click="$emit(\'remove\')">X</button></li>'
    })
    var app = new Vue({
        el: '#app',
        data: {
        	newTodoText:'',
        	todos:[
        	]
        },
        methods:{
        	addNewTodo:function(){
        		this.todos.push(this.newTodoText)
        		this.newTodoText=''
        	}
        }

    })
    </script>
</body>

</html>
